import React from "react";
import Qs from 'qs'
import axios from "../../../http";
import {NavBar, Toast, Button, Card, Form, Input} from "antd-mobile";

import {withRouter} from "react-router";

import {KeyOutline, RightOutline} from "antd-mobile-icons";
class Settings extends React.Component {


    constructor(props) {
        super(props);
        this.state={orinPassword:'',confirmNewPassword:'',newPassword:''}
    }

    updatePassword=()=>{
        axios.post('api/core/access/user/updatePassword', Qs.stringify(
            {   "newPassword":this.state.newPassword,
                "confirmNewPassword": this.state.confirmNewPassword,
                "orinPassword":this.state.orinPassword}
        ),{headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
            .then((response)=>{
                let  data=response.data;
                let icon= 'success';
                if(data.status!=1){
                    icon= 'fail';
                }
                Toast.show({
                    icon: icon,
                    content: data.message,
                });
            })
            .catch(function (error) {
                Toast.show({
                    icon: 'fail',
                    content: error,
                });
            });
    }


    render(){
        return(
            <>
                <NavBar onBack={()=>{this.props.history.push({ pathname: "/me" })}} >设置</NavBar>

                <Card
                    title={
                        <div style={{ fontWeight: 'normal' }}>
                            <KeyOutline style={{ marginRight: '4px', color: '#1677ff' }} />
                            修改密码
                        </div>
                    }


                    style={{ borderRadius: '16px' }}
                >
                    <div >

                        <Form
                            footer={
                                <Button block type='submit' color='primary' onClick={this.updatePassword}>
                                    提交
                                </Button>
                            }
                        >

                            <Form.Item
                                label='当前密码：'
                                rules={[{ required: true, message: '当前密码不能为空' }]}
                            >
                                <Input placeholder='请输入当前密码' type={'password'} value={this.state.orinPassword} onChange={(value)=>{this.setState({orinPassword:value})}} />
                            </Form.Item>

                            <Form.Item
                                label='新密码：'
                                rules={[{ required: true, message: '新密码不能为空' }]}
                            >
                                <Input placeholder='请输入新密码' type={'password'} value={this.state.newPassword} onChange={(value)=>{this.setState({newPassword:value})}} />
                            </Form.Item>
                            <Form.Item
                                label='确认新密码：'
                                rules={[{ required: true, message: '确认新密码不能为空' }]}
                            >
                                <Input placeholder='请输入确认新密码' type={'password'}   value={this.state.confirmNewPassword} onChange={(value)=>{this.setState({confirmNewPassword:value})}} />
                            </Form.Item>

                        </Form>

                    </div>

                </Card>
            </>


        )


    }
}

export default withRouter(Settings)